<template>
  <div class="lineChart">
    <el-tree
      class="lineChart-tree"
      :data="treeData"
      :props="{
        label: 'deviceNo',
        children: 'child',
      }"
      :default-expand-all="true"
      @node-click="nodeClick"
    >
    </el-tree>

    <div class="lineChart-right">
      <div style="display: flex">
        <div style="width: 460px">
          <el-date-picker
            v-model="dateValue"
            @change="getData('')"
            type="datetimerange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </div>
        <el-button type="primary" @click="getData('')">查询</el-button>
      </div>
      <div id="line-chart" v-show="hasLineData"></div>
      <div v-show="!hasLineData" class="no-data">暂无数据</div>
      <div>
        <div style="font-size: 22px; margin: 10px 0">历史数据</div>

        <el-table
          :height="tableHeight"
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
        >
          <el-table-column
            v-for="item in columns"
            :prop="item.prop"
            :label="item.label"
            align="center"
          ></el-table-column>
        </el-table>
        <el-pagination
          small
          layout="prev, pager, next"
          @current-change="changeTpcList"
          :total="query.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import {
  getNewDeviceHistoryData,
  getNewLineChart,
  getNewTree,
} from "../../../api";

const props = defineProps(["data"]);

const dateValue = ref([
  dayjs().subtract(1, "month").format("YYYY-MM-DD"),
  dayjs().format("YYYY-MM-DD"),
]);
const columns = [
  { label: "日期", prop: "dateTime" },
  { label: "台区名称", prop: "districtName" },
  { label: "设备ID", prop: "deviceNo" },
  { label: "设备状态", prop: "deviceStatus" },
  { label: "监测电量", prop: "deviceMeteredElectricity" },
  { label: "关联电表电量", prop: "electricityMeterMetering" },
  { label: "电量损失", prop: "energyLoss" },
  { label: "电量损失率", prop: "energyLossRate" },
];
const initChart = async () => {
  // const myChart = echarts.getInstanceByDom(domRef)
  const datas = lineData.value.rows;
  const xLabel = datas?.typeOne?.map((item) => item.dateTime);
  const oneValue = datas?.typeOne?.map((item) => item.num);
  const twoValue = datas?.typeTwo?.map((item) => item.num);

  const divBox = document.getElementById("line-chart");
  // divBox.
  const myChart = echarts.init(divBox);

  //   const legendData = ["终端设备检测电流", "实际电流"] //图例
  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xLabel,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "1",
        type: "line",
        stack: "Total",
        data: oneValue,
        markPoint: {
          data: [
            {
              name: "某个屏幕坐标",
              coord: [0, datas?.impoortTotal],
              x: "95%",
            },
          ],
          itemStyle: {
            // borderColor: "rgba(137, 78, 78, 1)",
            color: "red",
          },
        },
      },
      {
        name: "2",
        type: "line",
        stack: "Total",
        data: twoValue,
      },
    ],
  };

  myChart.setOption(option);

  // 监听窗口变化，响应图表
  window.addEventListener("resize", function () {
    if (myChart) {
      myChart.resize();
    }
  });

  return {
    resize: function () {
      myChart.resize();
    },
  };
};

const treeData = ref([]);
const getTree = async () => {
  const res = await getNewTree(props.data.districtId);
  if (res.rows.districtId) {
    res.rows.deviceNo = res.rows.districtName;
    treeData.value = [res.rows];
  }
};
const query = ref({
  pageNumber: 1,
  pageSize: 10,
  total: 0,
});
const tableData = ref([]);
const lineData = ref([]);

const getTableData = async (deviceNo) => {
  const res = await getNewDeviceHistoryData({
    deviceNo: deviceNo,
    districtId: props.data.districtId,
    pageNumber: query.value.pageNumber,
    pageSize: query.value.pageSize,
  });
  tableData.value = res.rows;
  query.value.total = res.total;
};

const hasLineData = ref(true);
const getData = async (deviceNo) => {
  const res: [] = await getNewLineChart({
    districtId: props.data.districtId,
    deviceNo: deviceNo,
    endDate: dateValue.value[1],
    passNo: 0,
    startDate: dateValue.value[0],
    testNo: "",
  });
  lineData.value = res;
  if (!res.rows?.typeOne.length && !res.rows?.typeTwo.length) {
    hasLineData.value = false;
    return;
  }
  hasLineData.value = true;
  initChart();
};
// Tpc列表分页
const changeTpcList = (val: number) => {
  query.value.pageNumber = val;
  getTableData("");
};
const initData = () => {
  getTableData("");
  getData("");
  getTree();
};
const nodeClick = (item, node, treeNode, obj) => {
  getTableData(item.deviceNo);
  getData(item.deviceNo);
};
onMounted(() => {
  initData();
  // initChart();
});
</script>
<style lang="less" scoped>
.lineChart {
  display: flex;

  .lineChart-tree {
    width: 200px;
    border-right: 1px dashed gainsboro;
    margin-right: 20px;
  }
  &-right {
    flex: 1;
  }

  #line-chart {
    height: 300px;
  }
}
</style>
